<template>
	<view class="m-tabs" :class="{center: isCenter}" :style="[tabStyle]">
		<view class="m-tab" v-for="(tab,index) in list" :key="index" :style="[tabItemStyle(index)]" @tap="clickTab(index)">
			<text class="m-title">{{tab.text}}</text>
			<view class="m-indicator" :style="[tabBarStyle(index)]"></view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'm-tabs',
	props: {
		// 标题列表
		list: {
			type: Array,
			default(){
				return []
			}
		},
		// 选中的标题的索引
		current: {
			type: Number,
			default: 0
		},
		// 标题高度
		height: {
			type: Number,
			default: 50
		},
		// 标题字体大小
		fontSize: {
			type: Number,
			default: 24
		},
		// 高亮标题字体大小
		activeFontSize: {
			type: Number,
			default: 36
		},
		// 指示器颜色
		activeColor: {
			type: String,
			default: '#2979ff'
		},
		// 标题文字颜色
		inactiveColor: {
			type: String,
			default: '#303133'
		},
		// 标题文字高亮颜色
		textActiveColor: {
			type: String,
			default: '#2979ff'
		},
		// 各标题宽度
		itemWidth: {
			type: Number,
			default: 140
		},
		// 标题之间的间隙
		gutter:{
			type: Number,
			default: 30
		},
		// 是否宽度自适应
		autoWidth: {
			type: Boolean,
			default: false
		},
		// 整个标题栏是否居中显示
		isCenter: {
			type: Boolean,
			default: false
		},
		// 选中标题文字是否加粗
		bold: {
			type: Boolean,
			default: false
		},
		// 指示器宽度
		barWidth: {
			type: Number,
			default: 40
		},
		// 指示器高度
		barHeight: {
			type: Number,
			default: 6
		},
		// 指示器图标地址
		indicatorImg: {
			type: String,
			default: ''
		},
		// 指示器横向偏移量
		indicatorX: {
			type: Number,
			default: 0
		},
		// 指示器纵向偏移量
		indicatorY: {
			type: Number,
			default: 0
		}
	},
	data(){
		return {
			currentIndex: this.current
		}
	},
	watch: {
		current: {
			handler(newVal){
				this.currentIndex = newVal
			}
		}
	},
	computed: {
		tabStyle(){
			let cutY = this.indicatorY || 0;
			if(cutY > this.barHeight){
				cutY = this.barHeight
			}
			let style = {
				height: (this.height + this.barHeight - cutY) + 'rpx',
				lineHeight: this.height + 'rpx',
				fontSize: this.fontSize + 'rpx',
				color: this.inactiveColor
			}
			return style
		},
		tabItemStyle() {
			return index => {
				let style = {
					height: (this.height + this.barHeight) + 'rpx',
					marginRight: this.autoWidth ? `${this.gutter}rpx` : 0,
					width: this.autoWidth ? 'auto' : `${this.itemWidth}rpx`
				};
				// 字体加粗
				if (index == this.currentIndex) {
					if(this.bold){
						style.fontWeight = 'bold';
					}
					style.color = this.textActiveColor;
					style.fontSize = this.activeFontSize + 'rpx';
				}
				return style;
			}
		},
		tabBarStyle() {
			return index => {
				let style = {};
				if (index == this.currentIndex) {
					style.display = 'block'
					style.width = this.barWidth + 'rpx'
					style.backgroundColor = this.indicatorImg ? 'transparent' : this.activeColor
					style.height = this.barHeight + 'rpx'
					// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
					style.borderRadius = `${this.barHeight / 2}px`
					style.backgroundImage = `url(${this.indicatorImg})`
					style.display = 'block'
					let indicatorX = this.indicatorX || 0,indicatorY = this.indicatorY || 0
					style.transform = `translateX(-${indicatorX}rpx) translateY(-${indicatorY}rpx)`
				}
				return style;	
			}
		}
	},
	methods: {
		// 点击某一个tab菜单
		clickTab(index) {
			// 点击当前活动tab，不触发事件
			if(index == this.currentIndex) return;
			// 发送事件给父组件
			this.$emit('change', index);
		}
	}
}
</script>
<style lang="less" scoped>
.m-tabs{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow: hidden;
	&.center{
		justify-content: center;
	}
	.m-tab{
		display: flex;
		flex-direction: column;
		align-items: center;
		&:last-child{
			margin-right: 0!important;
		}
		.m-title{
			position: relative;
			z-index: 2;
		}
		.m-indicator{
			background-size: 100%;
			position: relative;
			z-index: 1;
			background-repeat: no-repeat;
		}
	}
}
</style>